import React from 'react';
import { Form, Input, Button, TreeSelect,message, } from 'antd';
import { useDispatch } from "react-redux"
const layout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
const AddStaff = (props) => {
  //修改redux中的数据
  const dispacth = useDispatch()
  const onFinish = (values) => {
    values.key = Date.now()
    props.fn3(values)
    dispacth({
      type:"addNewStaff",
      data:values
    })
    message.info('提交成功');
    props.fn()
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (

    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="员工编号"
        name="staffNumber"
        rules={[
          {
            required: true,
            message: '请输入用户编号!',
          }, {
            max: 5,
            message: "员工编号最大长度为5"
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="员工姓名"
        name="name"
        rules={[
          {
            required: true,
            message: '请输入员工姓名!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="员工账号"
        name="account"
        rules={[
          {
            required: true,
            message: '请输入员工账号!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name={`department`}
        label="所属部门">
        <TreeSelect
          rules={[
            {
              required: true,
              message: '请输入所属部门!',
            },
          ]}
          treeData={[
            {
              value: '技术部',
              label: '技术部',
            },
            {
              value: '行政部',
              label: '行政部',
            },
            {
              value: '公共管理科',
              label: '公共管理科',
            },
            {
              value: '行政事业部',
              label: '行政事业部',
            },
          ]}
        />
      </Form.Item>
      <Form.Item
        name={`post`}
        label="员工职位">
        <TreeSelect
          rules={[
            {
              required: true,
              message: '请输入所属部门!',
            },
          ]}
          treeData={[
            {
              value: '销售经理',
              label: '销售经理',
            },
            {
              value: '项目经理',
              label: '项目经理',
            },
            {
              value: '总经理',
              label: '总经理',
            },
            {
              value: '副总经理',
              label: '副总经理',
            },
          ]}
        />
      </Form.Item>
      <Form.Item
        label="电话号码"
        name="phonenumber"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name={`status`}
        label="状态">
        <TreeSelect
          treeData={[
            {
              value: '离职',
              label: '离职',
            },
            {
              value: '在职',
              label: '在职',
            },
          ]}
        />
      </Form.Item>
      <Form.Item
        label="添加时间"
        name="addTime"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          提交
                </Button>
        <Button style={{ marginLeft: "2rem" }} onClick={() => { props.fn2() }}>
          取消
                </Button>
      </Form.Item>
    </Form>

  );
}

export default AddStaff;
